<template>
  <div class="list">
    <p class="nickname">{{ nickname }}{{ type === '动态' ? '' : '的' }}{{ type }}</p>
    <div class="content">
      <div v-if="datalist !== null" class="cdata">
        <!-- <div v-if="type === '动态'"></div> -->
        <!-- 关注与粉丝数据 -->
        <div class="follows" v-for="(item, index) in datalist" :key="index">
          <div class="usrImg" @click="collectorInfo(item.userId)">
            <img :src="item.avatarUrl" />
          </div>
          <div class="center">
            <span class="name" @click="collectorInfo(item.userId)">{{ item.nickname }}<i :class="item.vipType === 0 ? '' : 'iconfont icon-VIP' "></i></span>
            <span class="intro">{{ item.signature === null ? ' ' : item.signature }}</span>
            <div class="num">
              <span>歌单：{{ item.playlistCount === 0 ? 0 : item.playlistCount }}</span>
              <span class="line">|</span>
              <span>粉丝：{{ item.followeds === 0 ? 0 : item.followeds }}</span>
            </div>
          </div>
          <div class="right">
            <el-button size="mini" class="iconfont icon-add" v-if="!item.followed"> 关注</el-button>
            <el-button size="mini" class="iconfont icon-add" v-else style="color: #c0c0c0; border-color: #c0c0c0;"> 关注</el-button>
          </div>
        </div>
      </div>
      <div v-else style="margin: 50px auto; font-size: 30px;">暂无数据 . . . . . .</div>
    </div>
  </div>
</template>

<script>
import {
  getUserDetailInfo,
  getUserEventList,
  getUserFollowsList,
  getUserFollowedsList
} from '../../../network/userinfo.js'
import {
  formatTime
} from '../../common/util.js'
export default {
  data () {
    return {
      id: '',
      datalist: [],
      nickname: '',
      types: [{
        id: 13,
        type: '分享歌单'
      },
      {
        id: 17,
        type: '分享电台节目'
      },
      {
        id: 18,
        type: '分享单曲'
      },
      {
        id: 19,
        type: '分享专辑'
      },
      {
        id: 21,
        type: '分享视频'
      },
      {
        id: 22,
        type: '转发'
      },
      {
        id: 24,
        type: '分享专栏文章'
      },
      {
        id: 28,
        type: '分享电台节目'
      },
      {
        id: 35,
        type: '分享歌单'
      },
      {
        id: 39,
        type: '发布视频'
      },
      {
        id: 41,
        type: '分享视频'
      }
      ],
      // 页面类型
      type: ''
    }
  },
  methods: {
    getUserDetailInfo (uid) {
      getUserDetailInfo(uid).then(res => {
        this.nickname = res.data.profile.nickname
      })
    },
    // 动态数据
    getUserEventList (uid) {
      getUserEventList(uid).then(res => {
        // console.log(res.data)
        this.datalist = res.data.events
        this.datalist.forEach(item => {
          item.type = this.types.filter(x => {
            if (x.id === item.type) {
              return x.type
            }
          })
        })
        // console.log(this.eventlist)
        // console.log(this.typed)
      })
    },
    // 关注数据
    getUserFollowsList (uid) {
      getUserFollowsList(uid).then(res => {
        // console.log(res.data)
        this.datalist = res.data.follow
        // console.log(this.datalist)
      })
    },
    // 粉丝数据
    getUserFollowedsList (uid) {
      getUserFollowedsList(uid).then(res => {
        this.datalist = res.data.followeds
        console.log(res.data)
      })
    },
    // 跳转用户信息列表
    collectorInfo (id) {
      // getUserDetailInfo(userId).then(res => {
      //   console.log(res.data)
      // })
      this.$router.push('/user_info/' + id)
    }
  },
  filters: {
    showDate: function (value) {
      const date = new Date(value)
      return formatTime(date, 'yyyy-MM-dd hh:mm')
    }
  },
  created () {
    this.id = parseInt(this.$route.params.id)
    this.type = this.$route.params.type
    this.getUserDetailInfo(this.id)
    console.log(this.type)
    if (this.type === '动态') {
      // this.getUserEventList(this.id)
    } else if (this.type === '关注') {
      this.getUserFollowsList(this.id)
    } else {
      this.getUserFollowedsList(this.id)
    }
  }
}
</script>

<style lang="less" scoped>
  .list {
    width: 82%;
    overflow: auto;

    .nickname {
      width: 95%;
      margin: 20px auto;
      font-size: 25px;
      border-bottom: 2px solid #e1e1e2;
      padding-bottom: 10px;
    }

    .content {
      width: 95%;
      margin: auto;
      display: flex;
      flex-direction: row;
      .cdata {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        // background-color: #0077AA;
        .follows {
          width: 49%;
          border: 1px solid #eaeaea;
          margin-bottom: 20px;
          display: flex;
          justify-content: flex-start;
          box-sizing: border-box;

          .usrImg {
            width: 15%;
            padding: 10px;
            display: flex;
            align-items: center;
            cursor: pointer;

            img {
              width: 90%;
              border-radius: 50%;
            }
          }

          .center {
            width: 60%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 10px 0;

            .name {
              font-size: 20px;
              display: flex;
              align-items: center;
              cursor: pointer;

              i {
                font-size: 30px;
              }
            }

            .intro {
              color: #888888;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .num {
              color: #888888;

              .line {
                padding: 0 15px;
              }
            }
          }

          .right {
            width: 15%;
            margin-left: 4%;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .icon-add:before {
              color: #ee0000;
              font-size: 16px;
            }

            .el-button {
              font-size: 14px;
              display: flex;
            }
          }
        }
      }
    }
  }
</style>
